<template>
    <template v-for="(item, index) in dataList" :key="`list${index}`">
        <item-d
            :themeType="themeType"
            :keu="spinning"
            :title="item.title"
            :data="item.data"
            :tips="item.tips"
            :color="item.color"
            :userCount="item.userCount"
        />
    </template>
</template>

<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';
    import { cloneDeep } from 'lodash-es';
    import ItemD from '/@/components/item-d/item-d.vue';
    import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';

    const { setSession, getSession } = useSession();
    const { PAGE2_LEFT } = caching;
    const { spinning, setSpin } = useSpin();
    const dataList = ref([
        {
            title: '心率',
            data: [
                { name: '正常', value: 0, key: 'normalCount' },
                { name: '警戒', value: 0, key: 'warnCount' },
                { name: '危险', value: 0, key: 'riskCount' },
            ],
            type: '1',
            color: ['#0098FA', '#FF6648', '#FB466C'],
            tips: '正常范围60~100次/分',
            userCount: '',
        },
        {
            title: '血氧',
            data: [
                { name: '正常', value: 0, key: 'normalCount' },
                { name: '警戒', value: 0, key: 'warnCount' },
                { name: '危险', value: 0, key: 'riskCount' },
            ],
            type: '2',
            color: ['#0098FA', '#FF6648', '#FB466C'],
            tips: '血氧饱和度范围95%~100%',
            userCount: '',
        },
        {
            title: '压力',
            data: [
                { name: '正常', value: 0, key: 'normalCount' },
                { name: '放松', value: 0, key: 'unwindCount' },
                { name: '中等', value: 0, key: 'warnCount' },
                { name: '偏高', value: 0, key: 'riskCount' },
            ],
            type: '3',
            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
            tips: '',
            userCount: '',
        },
        {
            title: '体温',
            data: [
                { name: '<37.2', value: 0, key: 'normalCount' },
                { name: '37.2-38', value: 0, key: 'warnCount' },
                { name: '>38', value: 0, key: 'riskCount' },
            ],
            type: '5',
            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
            tips: '',
            userCount: '',
        },
    ]);

    const props = defineProps({
        orgCode: String,
        type: String,
        themeType: String,
    });
    onMounted(() => {});
    watch(props, () => {
        init();
    });

    async function init() {
        setSpin(true);
        try {
            const { code, result } = await getWatchDataByOrgCode(props);
            if (code == 200) {
                setValue(result);
                setSession(PAGE2_LEFT, JSON.stringify(result));
            }
        } catch {
            const result = JSON.parse(getSession(PAGE2_LEFT));
            setValue(result);
        }
    }

    function setValue(result) {
        setSpin(false);
        let data = cloneDeep(dataList.value);
        data.forEach((item) => {
            let resData = result.find((v) => v.type == item.type);
            item.userCount = resData.userCount;
            item.data.forEach((val) => {
                val.value = resData[val.key];
            });
        });
        dataList.value = data;
    }

    defineExpose({
        init,
    });
</script>

<style scoped></style>
